<template>
	<view class='pages'>
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<view v-if="list.length == 0">
				<view style="height: 100rpx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="flex row-between boxes" v-for="(item,index) in list" :key="index">
				<view>
					<view class="font-size-30 bold m-b-12">{{item.title}}</view>
					<view class="font-size-24" style="color: #9C9C9C;">时间：{{item.create_time}}</view>
				</view>
				<view class="font-size-30 bold" style="color: #457FD3;">{{item.num}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				length: true,
				list: [
					// {id: 1,type:1},
					// {id: 1,type:2}
				],
			}
		},
		async onLoad() {
			await this.getList();
		},
		methods: {
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 列表
			async getList() {
				let res = await this.$api.jifenlist({
					page_no: this.page,
					page_size: this.limit,
				});
				if (res.code == 1) {
					this.length = res.data.lists.length == this.limit;
					this.list.push(...res.data.lists);
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.pages {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: #eee;
	}
	.contentbox {
		flex: 1;
		overflow: hidden;
		padding: 20rpx 15rpx;
		box-sizing: border-box;

		.boxes {
			padding: 25rpx 30rpx;
			background: #fff;
			margin-bottom: 17rpx;
			border-radius: 20rpx;
			
		}
	}
</style>